<template>
    <div class="project-chart-card__wrap">
      <div class="project-chart-card__top">
          <yun-icon class="yun-icon__crown" name="crown"></yun-icon>
        <div class="project-chart-card__bottom" style="background-color: #A2BFD3">
          <img src="" alt="">
        </div>
      </div>
      <div class="project-chart-card__body">
        <a href="" class="project-chart-card__body__a">Sysbro</a>
        <p class="project-chart-card__body__p">这是一款系统助手，专为 deepin 操作系统打造。</p>

      </div>
      <div class="project-chart-card__footer">
        <div>
          <div class="project-chart-card__img">
            <img src="" alt="">
          </div>
          <p>rekols</p>
        </div>
        <span>261.7°</span>
      </div>

    </div>
</template>

<script>
    export default {
        name: "projectChartCard"
    }
</script>

<style lang="scss">
  .project-chart-card__wrap{
    width: 234*$length;
    height: 234*$length;
    //background-color: #7f828b;
    .project-chart-card__top{
      width: 74*$length;
      height: 102*$length;
      margin: 0 auto;
      color: #FFB764;
      position: relative;
      bottom: 20px;
      .yun-icon__crown{
        position: absolute;
        left: 16*$length;
        bottom: 94*$length;
        font-size: 28*$length;
      }
      .project-chart-card__icon{
        color: #FFB764;
      }
      .project-chart-card__bottom{
        width: 74*$length;
        height: 74*$length;
        @include border-radius(10*$length);
        @include box-shadow(0px 3px 6px rgba(0,0,0,0.1));
      }

    }
    .project-chart-card__body{
      padding-left: 20*$length;
      padding-right: 20*$length;

      .project-chart-card__body__a{
        font-size: 16*$length;
        color: #333333;
        &:hover{
          color: #00AAE6;
        }
      }
      .project-chart-card__body__p{
        margin-top: 10*$length;
        font-size: 13*$length;
        color: #666666;
        line-height: 24*$length;
      }
    }
    .project-chart-card__footer{
      padding-left: 20*$length;
      padding-right: 20*$length;
      @extend %flex-row-spb;
      .project-chart-card__img{
        height: 20*$length;
        width: 20*$length;
        background-color: orangered;
        @include border-radius(20*$length)

      }
    }

  }

</style>
